<template>
  <div>
    <!--title-->
    <common-title :titleProp="titleProp" ref="title"/>
    <!--tabs-->
    <common-tabs
        ref="tabs"
        :tabsProp="tabsProp"
        :toConfigureFieldDialog="toConfigureFieldDialog"
        :tabsSearchData="tabsSearchData"
    />
    <!--table表格配置-->
    <common-table
        ref="table"
        :tabsProp="tabsProp"
        :tableProp="tableProp"
        :tableData="tableData"
        :toConfigureFieldDialog="toConfigureFieldDialog"
        :paginationProp="paginationProp"
    />

    <!--抽屉增加和修改-->
    <common-drawer
        ref="commonDrawer"
        :drawerProp="drawerProp"
        :toConfigureFieldDialog="toConfigureFieldDialog"
        :formData="formData"
        v-if="drawerProp.drawer"
    />

    <!--tabs和table dialog 字段选择显示问题-->
    <conmmon-tabs-or-table
        :toConfigureFieldDialog="toConfigureFieldDialog"
        v-if="toConfigureFieldDialog.isDialog"
    />

    <el-dialog
        :append-to-body="true"
        :close-on-click-modal="false"
        :show-close="false"
        :close-on-press-escape="false"
        title="重置密码"
        :visible.sync="resetPasswordProp.isDialog"
        width="400px"
    >
      <el-form :model="resetPasswordProp" ref="resetPasswordRuleForm" label-width="100px">
        <el-form-item label="用户名" prop="username">
          {{ resetPasswordProp.username }}
        </el-form-item>
        <el-form-item
            label="密码"
            prop="newPwd"
            :rules="{ required: true, message: '请输入密码', trigger: 'blur' }"
        >
          <el-input
              v-model="resetPasswordProp.newPwd"
              clearable
              show-password
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
            icon="el-icon-close el-icon--left"
            @click="resetPasswordProp.isDialog=false"
        >
          取消
        </el-button>
        <el-button
            type="primary"
            icon="el-icon-check el-icon--left"
            @click="resetPasswordSubmitForm('resetPasswordRuleForm')"
        >
          确定
        </el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>


export default {
  name: 'accountSettings',
  components: {},
  props: [],
  data() {
    return {
      resetPasswordProp: {
        isDialog: false,
        type: 1,
        username: '',//用户名
        newPwd: '',//密码
      },
      //接口名称
      apiProp: {
        tableInit: 'roleSetUpList',//表格初始化
        tableAdd: 'roleSetUpAdd',//表格增加接口
        tableDel: 'roleSetUpDel',//表格删除接口
        tableEdit: 'roleSetUpAdd',//表格修改接口
        tableQuery: 'roleSetUpQuery',//表格查一条接口
        drawerEdit: '',//抽屉改
        drawerQuery: '',//抽屉查
        selectApiBoolean: false,//下拉接口是否拉取过，解决页面进来只要拉取一次
      },
      //tabs搜索的data
      tabsSearchData: {},
      //抽屉修改查看数据
      formData: {
        id: '',
        roleid: '',//角色id
        username: '',//用户名
        userpasswd: '',//密码
        photoUrl: [],//头像
      },
      //table 数据
      tableData: [],
      //title 配置
      titleProp: {
        titleName: '账号设置',//标题名称
        //按钮集合
        option: [
          {
            name: '添加账号',//名称
            routerRole: [20000],//可以见的角色权限id,号隔开
            type: 'primary',//颜色
            icon: 'el-icon-plus',//图标
            methodName: 'titleAddClick',//方法名称
          }]
      },
      //tabs 配置
      tabsProp: {
        tabsActive: "",//tabs 默认选择哪个标题 空是0
        tabsSeniorSearchShow: false,//是否有高级搜索
        tabsSeniorSearchDropDown: false,//高级搜索下拉默认显示状态
        tabsToConfigure: false,//tabs配置图标是否显示
        tabsStatusField: 'rolestatus',//切换的字段名
        tabPaneOption: [
          {
            label: '全部',
            value: "",
            routerRole: [20000],//可以见的角色权限id,号隔开
          }
        ]
      },
      //table配置文件
      tableProp: {
        loading: true,//table 初始化圈圈
        serialNo: true,//是否有序号
        multipleNo: false,//是否多选
        multipleSelectionId: 'id',//多选后需要的字段名 和row-key一起用的
        multipleSelection: [],//多选的值
        pageNo: true,//是否分页
        tableHeight: 0,//table 高度
        tableToConfigure: false,//配置按钮是否显示
        tableButOptionWidth: 320,//操作那列的长度 一个字15.5*字数 +64*按钮数 +20边框
        tableButStatusField: '',//按钮状态 字段名
        showSummary: false,//是否显示合计
        showSummaryTitle: '',//合计的名称
        tableExpandComponent: '',//下拉表格组件名称 tableData要一个字段[]去接收
        defaultExpandAll: false,//是否默认展开所有行
        //头部按钮集合
        topButOption: [],
        //table 操作集合
        tableButOption: [
          {
            name: '查看',//名称
            routerRole: [20000],//可以见的角色权限id,号隔开
            statusArray: [],//可以见的状态值 没有就为空
            type: 'primary',//颜色
            icon: 'el-icon-view',//图标
            methodName: 'tableSeeClick',//方法名称
          }, {
            name: '删除',//名称
            routerRole: [20000],//可以见的角色权限id,号隔开
            statusArray: [],//可以见的状态值
            type: 'danger',//颜色
            icon: 'el-icon-delete',//图标
            methodName: 'tableDelClick',//方法名称
          },
          {
            name: '重置密码',//名称
            routerRole: [20000],//可以见的角色权限id,号隔开
            statusArray: [],//可以见的状态值
            type: 'warning',//颜色
            icon: 'el-icon-refresh',//图标
            methodName: 'tableClick3',//方法名称
          }
        ],
      },
      //分页配置
      paginationProp: {
        currentPage: 1,//当前第几页
        pageSize: 10,//每页几条
        total: 0,//总数
      },
      //查看修改抽屉
      drawerProp: {
        drawer: false,
        loading: false,
        title: '我是标题',
      },
      //配置字段dialog 配置
      toConfigureFieldDialog: {
        tabsOrTableLoading: false,//拖拽 loading
        isDialog: false,//显示隐藏
        title: '筛选项配置',//标题
        fieldSearch: '',//dialog 搜索过滤
        tabsOrTable: 'tabs',//dialog配置 tabs 还是 table
        frozenFrontNum: 0,//冻结前几条
        frozenAfterNum: 1,//冻结后几条
        titleAddEdit: false,//title 新增按钮是否点击
        //抽屜方法名称
        drawerMethods: {
          drawerCancel: 'drawerCancel',//点击取消方法名
          drawerSubmitForm: 'drawerSubmitForm',//点击保存方法名
        },
        //tabs字段配置
        tabsFieldProp: [],
        //table字段配置
        tableFieldProp: [],
        //所有字段配置
        fieldProp: [
          {
            name: '基本设置',//标题
            routerRole: [20000],//什么角色id可以看见
            drawerEdit: false,//抽屉有没有点击编辑
            option: [
              {
                show: true,//搜索的时候是否显示
                tabsChecked: false,//tabs 选择
                tableChecked: true,//table 选择
                tabsCheckedDisabled: false,//tabsDialog 不能修改 true
                tableCheckedDisabled: false,//tableDialog 不能修改 true
                tableMinWidth: 150,//表格最小长度
                tableShowOverflowTooltip: true,//表格是否超长提示
                totalOrNot: false,//是否合计
                totalCompany: '',//合计后面添加的字
                label: '用户名',
                field: 'username',
                required: true,//是否必填
                rules: [{required: true, message: '请输入用户名', trigger: 'blur'}],//自定义验证规则
                statusRole: [],//在什么状态下可以看见 如审核可以见，未审核就不可以见了  这里面的值只能是字符串
                routerRole: [20000],//什么角色id可以看见
                editRole: [20000],//什么角色可以修改
                drawerSeeWith: true,//抽屉查看满一行
                drawerEditWith: true,//抽屉编辑满一行
                type: '输入框',
              },
              {
                show: true,//搜索的时候是否显示
                tabsChecked: false,//tabs 选择
                tableChecked: true,//table 选择
                tabsCheckedDisabled: false,//tabsDialog 不能修改 true
                tableCheckedDisabled: false,//tableDialog 不能修改 true
                label: '密码',
                field: 'userpasswd',
                required: true,//是否必填
                rules: [{required: true, message: '请输入密码', trigger: 'blur'}],//自定义验证规则
                routerRole: [20000],//什么角色id可以看见
                editRole: [20000],//什么角色可以修改
                drawerSeeWith: true,//抽屉查看满一行
                drawerEditWith: true,//抽屉编辑满一行
                type: '密码框',
                drawerSeeShow: false,//抽屉查看是否显示  true 不显示
                drawerEditShow: true,//抽屉修改是否显示  true 不显示
                tableShow: true,//表格是否显示  true 不显示
              },
              {
                show: true,//搜索的时候是否显示
                tabsChecked: false,//tabs 选择
                tableChecked: true,//table 选择
                tabsCheckedDisabled: true,//tabsDialog 不能修改 true
                tableCheckedDisabled: false,//tableDialog 不能修改 true
                tableMinWidth: 220,//表格最小长度
                tableShowOverflowTooltip: false,//表格是否超长提示
                label: '头像',
                field: 'photoUrl',
                required: true,//是否必填
                rules: [{required: true, message: '请选择图片', trigger: 'blur'}],//自定义验证规则
                routerRole: [20000],//什么角色id可以看见
                editRole: [20000],//什么角色可以修改
                drawerEditWith: true,//抽屉查编辑一行
                type: '图片上传',
                isAll: false,//上传的是否是多图还是一张的 true 是 false 否
                class: '',//上传图片需要修改样式的时候用
                urlType: 'fileName',//后台返回的字段文件字段值
                size: 10,//最大上传几MB的图片
                limit: 0,//最多上传多少个张图片 0 是不限制
                multiple: true,//是否支持多选文件上传
                accept: '.png,.jpg',//可上传文件格式,用,号隔开 .png,.jpg
                drawerSeeWith: true,//抽屉查看满一行
              },
              {
                show: true,//搜索的时候是否显示
                tabsChecked: true,//tabs 选择
                tableChecked: true,//table 选择
                tabsCheckedDisabled: false,//tabsDialog 不能修改 true
                tableCheckedDisabled: false,//tableDialog 不能修改 true
                label: '选择角色',
                field: 'roleid',
                required: true,//是否必填
                rules: [{required: true, message: '请选择角色', trigger: 'blur'}],//自定义验证规则
                routerRole: [20000],//什么角色id可以看见
                editRole: [20000],//什么角色可以修改
                drawerSeeWith: true,//抽屉查看满一行
                drawerEditWith: true,//抽屉编辑满一行
                type: '下拉框',
                //选项 不是分组
                option: [],
                filterable: true,//是否可搜索
                multiple: false,//是否多选
                group: false,//是否分组
              },
            ]
          },
        ],
      },
    };
  },
  mounted() {
    this.initData();//数据初始化
    this.tabsOrTableInit();//dialog拖拽初始化
    this.calculationHeight();//table计算高度
    //监听浏览器变化
    window.onresize = () => {
      return (() => {
        this.calculationHeight();//table计算高度
      })();
    };
  },
  watch: {
    //主要作用监听赋值给table高度
    'tabsProp.tabsSeniorSearchDropDown'() {
      this.calculationHeight();//table计算高度
    },
  },
  methods: {
    //初始化数据 下拉接口执行完在执行拉取表格的接口 没完成
    initData() {
      this.tableProp.loading = true;
      //下拉接口
      let variableArray = [];//变量数组
      if (!this.apiProp.selectApiBoolean) {
        const roleidSelect = new Promise((resolve) => {
          for (let j = 0; j < this.toConfigureFieldDialog.fieldProp.length; j++) {
            for (let k = 0; k < this.toConfigureFieldDialog.fieldProp[j].option.length; k++) {
              if ('roleid' === this.toConfigureFieldDialog.fieldProp[j].option[k].field) {
                this.$roleSetUpSelect().then((result) => {
                  this.toConfigureFieldDialog.fieldProp[j].option[k].option = result.datas.map(item => ({
                    label: item.rolename,
                    value: item.roleid
                  }));
                  resolve()
                })
              }
            }
          }
        })
        variableArray.push(roleidSelect)
        this.apiProp.selectApiBoolean = true;
      }
      Promise.all(variableArray).then(() => {
        if (this.apiProp.tableInit) {
          let params = {
            page: this.paginationProp.currentPage,
            row: this.paginationProp.pageSize,
          }
          params[`${this.tabsProp.tabsStatusField}`] = this.tabsProp.tabsActive
          this[`$${this.apiProp.tableInit}`](params).then((result) => {
            if (result.data) {
              this.tableData = result.data.map(item => ({
                id: item.id,
                roleid: item.roleid,
                username: item.username,
                photoUrl: item.photoUrl ? JSON.parse(item.photoUrl) : [],
              }));
              this.paginationProp.total = result.count;//总数
              this.tableProp.loading = false;
            } else {
              this.tableData = [];
              this.paginationProp.total = result.count;//总数
              this.tableProp.loading = false;
            }
          }, () => {
            this.tableProp.loading = false;
          })
        } else {
          this.tableProp.loading = false;
        }
      })
    },
    //title 我是新增按钮点击
    titleAddClick() {
      this.drawerProp.loading = true;
      this.formData = this.$options.data().formData;
      this.drawerProp.title = '添加账号';
      for (let i = 0; i < this.toConfigureFieldDialog.fieldProp.length; i++) {
        this.toConfigureFieldDialog.fieldProp[i].drawerEdit = true;
      }
      //新增密码显示
      for (let j = 0; j < this.toConfigureFieldDialog.fieldProp.length; j++) {
        for (let k = 0; k < this.toConfigureFieldDialog.fieldProp[j].option.length; k++) {
          if ('userpasswd' === this.toConfigureFieldDialog.fieldProp[j].option[k].field) {
            this.toConfigureFieldDialog.fieldProp[j].option[k].drawerEditShow = false
          }
        }
      }
      this.toConfigureFieldDialog.titleAddEdit = true;
      this.drawerProp.drawer = true;
      this.drawerProp.loading = false;
    },
    //tabs 切换点击
    tabsSwitchClick() {
      this.initData()
    },
    //dialog拖拽初始化 要接口 接口回来配置文件 Nll就按默认配置的来，不为Null按配置好的来 没完成
    tabsOrTableInit() {
      this.toConfigureFieldDialog.tabsOrTableLoading = true;
      if (this.apiProp.drawerQuery) {
        this[`$${this.apiProp.drawerQuery}`]({params: ''}).then((result) => {
          if (result) {
            this.toConfigureFieldDialog = result;
          } else {
            this.toConfigureFieldDialog = this.$options.data().toConfigureFieldDialog;
          }
          this.tabsOrTableDataProcessing();
          this.toConfigureFieldDialog.tabsOrTableLoading = false;
        }, () => {
          this.toConfigureFieldDialog.tabsOrTableLoading = false;
        })
      } else {
        this.tabsOrTableDataProcessing();
        this.toConfigureFieldDialog.tabsOrTableLoading = false;
      }
    },
    //dialog拖拽 数据处理
    tabsOrTableDataProcessing() {
      let fieldProp = this.toConfigureFieldDialog.fieldProp;//所有字段
      let frozenFrontNum = 0;//冻结前几条
      let frozenAfterNum = 0;//冻结后几条
      let resFrozenFrontNum = 0;//冻结前几条 最终结果
      let resFrozenAfterNum = 0;//冻结后几条 最终结果
      //序号
      if (this.tableProp.serialNo) {
        if (this.toConfigureFieldDialog.frozenFrontNum > 0) {
          this.tableProp.serialNoFixed = true;
          frozenFrontNum += 1;
        }
      }
      //多选
      if (this.tableProp.serialNo) {
        if (this.tableProp.multipleNo) {
          if (this.toConfigureFieldDialog.frozenFrontNum >= 2) {
            this.tableProp.multipleNoFixed = true;
            frozenFrontNum += 1;
          } else {
            this.tableProp.multipleNoFixed = false;
          }
        } else {
          this.tableProp.multipleNoFixed = false;
        }
      } else {
        if (this.tableProp.multipleNo) {
          if (this.toConfigureFieldDialog.frozenFrontNum > 0) {
            this.tableProp.multipleNoFixed = true;
            frozenFrontNum += 1;
          } else {
            this.tableProp.multipleNoFixed = false;
          }
        }

      }

      resFrozenFrontNum = this.toConfigureFieldDialog.frozenFrontNum - frozenFrontNum;//冻结前几条 最终结果

      //操作列表是否显示
      for (let i = 0; i < this.tableProp.tableButOption.length; i++) {
        if (this.Utils.arrayContain(this.tableProp.tableButOption[i].routerRole, this.$store.state.routerRole)) {
          this.tableProp.tableButOptionShow = true;
        }
      }
      if (this.tableProp.tableButOptionShow) {
        if (this.toConfigureFieldDialog.frozenAfterNum > 0) {
          frozenAfterNum += 1;
          this.tableProp.tableButOptionNoFixed = 'right';
        } else {
          this.tableProp.tableButOptionNoFixed = false;
        }

      } else {
        this.tableProp.tableButOptionNoFixed = false;
      }

      resFrozenAfterNum = this.toConfigureFieldDialog.frozenAfterNum - frozenAfterNum;//冻结后几条 最终结果
      let tabsFieldPropArray = [];//当前角色权限有的列表

      //处理是tabs选取了还是table dialog选取了和是那列恒定
      for (let i = 0; i < fieldProp.length; i++) {
        for (let j = 0; j < fieldProp[i].option.length; j++) {
          if (fieldProp[i].option[j].tabsChecked) {
            this.toConfigureFieldDialog.tabsFieldProp.push(fieldProp[i].option[j]);
          }
          if (fieldProp[i].option[j].tableChecked) {
            if (this.Utils.arrayContain(fieldProp[i].option[j].routerRole, this.$store.state.routerRole)) {
              tabsFieldPropArray.push(fieldProp[i].option[j])
            }
            this.toConfigureFieldDialog.tableFieldProp.push(fieldProp[i].option[j]);
          }
        }
      }
      //给table列恒定列赋值
      for (let i = 0; i < tabsFieldPropArray.length; i++) {
        if (resFrozenFrontNum > i) {
          tabsFieldPropArray[i].fixed = 'left';
        } else if (resFrozenAfterNum >= (tabsFieldPropArray.length - i)) {
          tabsFieldPropArray[i].fixed = 'right';
        } else {
          tabsFieldPropArray[i].fixed = false;
        }
        for (let j = 0; j < this.toConfigureFieldDialog.tableFieldProp.length; j++) {
          if (tabsFieldPropArray[i].field === this.toConfigureFieldDialog.tableFieldProp[j].field) {
            this.toConfigureFieldDialog.tableFieldProp[j].fixed = tabsFieldPropArray[i].fixed;
          }
        }
      }
    },
    //tabs 点击设置图标 dialog拖拽
    tabsSetUpSearchClick() {
      this.toConfigureFieldDialog.isDialog = true;
      this.toConfigureFieldDialog.title = '筛选项配置';
      this.toConfigureFieldDialog.tabsOrTable = 'tabs';
    },
    //表格内容是否能拖动更随
    //dialog拖拽 还原初始化 就是给接口出个NULL  没完成
    tabsOrTableDialogInit() {
      this.toConfigureFieldDialog.tabsOrTableLoading = true;
      this[`$${this.apiProp.drawerEdit}`]({params: null}).then(() => {
        this.tabsOrTableInit();
      })
    },
    //dialog拖拽 点击搜索
    tabsOrTableSearch() {
      let fieldProp = this.toConfigureFieldDialog.fieldProp;//所有字段
      for (let i = 0; i < fieldProp.length; i++) {
        for (let j = 0; j < fieldProp[i].option.length; j++) {
          fieldProp[i].option[j].show = this.Utils.fuzzySearch(this.toConfigureFieldDialog.fieldSearch, fieldProp[i].option[j].label);
        }
      }
    },
    //dialog拖拽 点击取消
    tabsOrTableCancel() {
      this.toConfigureFieldDialog = this.$options.data().toConfigureFieldDialog;
      this.tabsOrTableInit();
    },
    //dialog拖拽 点击确定  没完成
    tabsOrTableDetermine() {
      this[`$${this.apiProp.drawerEdit}`]({params: this.toConfigureFieldDialog}).then(() => {
        this.tabsOrTableInit();
      })
    },
    //tabs 高级搜索 重置按钮
    tabsSearchReset() {
      this.tabsSearchData = this.$options.data().tabsSearchData;
    },
    //tabs 高级搜索 查询按钮点击
    tabsSearchDetermine() {
      this.initData();
    },
    //table 设置表头 dialog拖拽
    tableSetUpSearchClick() {
      this.toConfigureFieldDialog.isDialog = true;
      this.toConfigureFieldDialog.title = '表头设置';
      this.toConfigureFieldDialog.tabsOrTable = 'table';
    },
    //table 计算高度
    calculationHeight() {
      setTimeout(() => {
        this.tableProp.tableHeight = document.documentElement.clientHeight - 215 - this.$refs.title.$refs.title.clientHeight - this.$refs.tabs.$refs.tabs.clientHeight - this.$refs.table.$refs.tableTopBut.clientHeight;
      }, 300)
    },
    //table 点击查看
    tableSeeClick(row) {
      this.formData = this.$options.data().formData;
      this.drawerProp.drawer = true;
      this.drawerProp.loading = true;
      this.drawerProp.title = "查看详细";
      for (let i = 0; i < this.toConfigureFieldDialog.fieldProp.length; i++) {
        this.toConfigureFieldDialog.fieldProp[i].drawerEdit = false;
      }
      let params = {
        id: row.id
      }
      this[`$${this.apiProp.tableQuery}`](params).then((result) => {
        this.formData.id = result.data.id;
        this.formData.roleid = result.data.roleid;
        this.formData.username = result.data.username;
        this.formData.photoUrl = result.data.photoUrl ? JSON.parse(result.data.photoUrl) : [];
        this.formData.rolestatus = result.data.rolestatus;
        this.toConfigureFieldDialog.titleAddEdit = false;
        this.drawerProp.loading = false;
      }, () => {
        this.drawerProp.loading = false;
      })
    },
    //table 重置密码 点击
    tableClick3(row) {
      this.resetPasswordProp.isDialog = true;
      this.resetPasswordProp.username = row.username;
      this.resetPasswordProp.username = row.username;
      this.resetPasswordProp.newPwd = '';
    },
    //重置密码dialog点击确定
    resetPasswordSubmitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$roleSetUpResetPass(this.resetPasswordProp).then(() => {
            this.resetPasswordProp.isDialog = false;
            this.$message.success('重置成功');
          })
        } else {
          return false;
        }
      });
    },
    //table 点击删除
    tableDelClick(row) {
      this.$confirm('此操作将永久删除, 是否继续?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let data = {
          ids: row.username
        }
        this[`$${this.apiProp.tableDel}`](data).then(() => {
          this.$message.success('删除成功');
          this.initData();
        })
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },
    //分页 选择了每页几条
    pageSizeChange(val) {
      this.paginationProp.currentPage = 1;//当前第几页
      this.paginationProp.pageSize = val;//每页几条
      this.initData();
    },
    //分页 点击了跳转到第几页
    pageCurrentChange(val) {
      this.paginationProp.currentPage = val;//当前第几页
      this.initData();
    },
    //抽屉 title点击新增按钮后-点击保存
    drawerTitleAddSubmitForm() {
      this.drawerProp.loading = true;
      let data = JSON.parse(JSON.stringify(this.formData));
      data.photoUrl = JSON.stringify(data.photoUrl)
      console.log(data)
      this[`$${this.apiProp.tableAdd}`](data).then(() => {
        for (let i = 0; i < this.toConfigureFieldDialog.fieldProp.length; i++) {
          this.toConfigureFieldDialog.fieldProp[i].drawerEdit = false;
        }
        this.toConfigureFieldDialog.titleAddEdit = false;
        this.drawerProp.drawer = false;
        this.$message.success('保存成功');
        this.initData();
        this.drawerProp.loading = false;
      }, () => {
        this.drawerProp.loading = false;
      })
    },
    //抽屉 点击编辑 key
    drawerEditButClick() {
      //新增密码显示
      for (let j = 0; j < this.toConfigureFieldDialog.fieldProp.length; j++) {
        for (let k = 0; k < this.toConfigureFieldDialog.fieldProp[j].option.length; k++) {
          if ('userpasswd' === this.toConfigureFieldDialog.fieldProp[j].option[k].field) {
            this.toConfigureFieldDialog.fieldProp[j].option[k].drawerEditShow = true
          }
        }
      }
    },
    //抽屉 单个点击保存
    drawerSubmitForm() {
      this.drawerProp.loading = true;
      let data = JSON.parse(JSON.stringify(this.formData));
      data.photoUrl = JSON.stringify(data.photoUrl)
      this[`$${this.apiProp.tableEdit}`](data).then(() => {
        for (let i = 0; i < this.toConfigureFieldDialog.fieldProp.length; i++) {
          this.toConfigureFieldDialog.fieldProp[i].drawerEdit = false;
        }
        this.tableSeeClick({id: this.formData.id})
        this.initData();
        this.$message.success('保存成功');
      }, () => {
        this.drawerProp.loading = false;
      })
    },
    //抽屉 点击取消
    drawerCancel() {
      this.drawerProp.loading = true;
      this.toConfigureFieldDialog.titleAddEdit = false;
      for (let i = 0; i < this.toConfigureFieldDialog.fieldProp.length; i++) {
        this.toConfigureFieldDialog.fieldProp[i].drawerEdit = false;
      }
      this.drawerProp.loading = false;
    },
  },
};
</script>

<style lang="scss" scoped></style>
